<template>
    <div>

        <span>查找用户：</span>
        <el-select v-model="searchType" placeholder="请选择查找类别">
            <el-option v-for="item in searchTypeTable" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-input
            placeholder="请输入搜索关键字"
            style="position: relative;left: 5px; width: 200px"
            v-model="searchKeyword"
            clearable>
        </el-input>
        <el-button type="primary" icon="el-icon-search" style="position: relative;left: 10px;" @click="getUserMethod">搜索</el-button>

        <el-button type="text"  style="position: relative;left: 15px;" @click="exitSearch">退出搜索</el-button>


        <div style='float: right'>
            <el-button icon='el-icon-circle-plus-outline' @click='addUserButton' size='small' type="success" round>添加用户</el-button>
        </div>

        <div>
            <el-table
                :data="userTable"
                style="width: 100%"
                :border = 'border'>

                <el-table-column
                    prop="userId"
                    label="用户id"
                    width="80">
                </el-table-column>

                <el-table-column
                    prop="username"
                    label="用户名"
                    width="150">
                </el-table-column>

                <el-table-column
                    prop="nickname"
                    label="昵称"
                    width="150">
                </el-table-column>

                <el-table-column
                    prop="phone"
                    label="手机号码"
                    width="150">
                </el-table-column>

                <el-table-column
                    prop="roles"
                    label="用户身份"
                    width="230">
                    <template slot-scope="scope">

                        <span v-for='item in scope.row.roles'>

                            <el-tag v-if="item === 'admin'" type='success' style='margin-right: 3px'>{{item}}</el-tag>
                            <el-tag v-else-if="item === 'seller'" type='primary' style='margin-right: 3px'>{{item}}</el-tag>
                            <el-tag v-else-if="item === 'runner'" type='warning' style='margin-right: 3px'>{{item}}</el-tag>
                            <el-tag v-else type='info' style='margin-right: 3px'>{{item}}</el-tag>
                        </span>

                    </template>
                </el-table-column>

                <el-table-column
                    prop="money"
                    label="余额(元)"
                    width="80">
                </el-table-column>

                <el-table-column
                    prop="score"
                    label="积分"
                    width="80">
                </el-table-column>

                <el-table-column
                    prop="createTime"
                    label="注册时间"
                    width="160">
                </el-table-column>

                <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">

                    <template slot-scope="scope">

                        <el-button @click="editRoleButton(scope.row)" type="text" size="small">权限</el-button>
                        <el-button @click='addMoneyButton(scope.row)' type="text" size="small">充值</el-button>
                        <el-button @click='subMoneyButton(scope.row)' type="text" size="small">退款</el-button>
                    </template>
                </el-table-column>
            </el-table>



            <el-pagination
                background
                layout="prev, pager, next"
                @current-change='selectPage'
                :page-size='size'
                :total='total'>
            </el-pagination>


            <!-- Form -->

            <!-- 添加用户-->
            <el-dialog :title="dialogTitle" :visible.sync="addUserV">

                <el-card class="box-card">
                    <el-form :model="addUserForm"   ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="用户名" prop="name">
                            <el-input required='required' type='text' maxlength="32" show-word-limit v-model="addUserForm.username"></el-input>
                        </el-form-item>


                        <el-form-item label="密码" prop="name">
                            <el-input required='required' type='text' maxlength='32' show-word-limit v-model="addUserForm.password"></el-input>
                        </el-form-item>

                        <el-form-item label="昵称" prop="name">
                            <el-input required='required' type='text' maxlength='32' show-word-limit v-model="addUserForm.nickname"></el-input>
                        </el-form-item>

                        <el-form-item label="用户身份">
                            <el-select  v-model="addUserForm.role" placeholder="请选择用户身份">

                                <el-option v-for='item in roleTable' :label='item.label' :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addUserV = false">取 消</el-button>
                    <el-button type="primary" @click='addUserMethod'>提 交</el-button>
                </div>
            </el-dialog>

            <!-- 修改权限-->
            <el-dialog title="修改用户身份权限" :visible.sync="editRoleV">

                <el-card class="box-card" shadow='hover'>
                    <el-checkbox-group v-model="roleArr">
                        <el-checkbox label="seller">商家seller</el-checkbox>
                        <el-checkbox label="runner">配送员runner</el-checkbox>
                        <el-checkbox label="admin">超级管理员admin</el-checkbox>
                    </el-checkbox-group>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editRoleV = false">取 消</el-button>
                    <el-button type="primary" @click='editRoleMethod'>提 交</el-button>
                </div>
            </el-dialog>

            <!-- 充值 退款对话框-->
            <el-dialog :title="editMoneyTitle" :visible.sync="editMoneyV">

                <el-card class="box-card" shadow='hover'>
                   <el-link style='margin-right: 50px' type="primary">用户名：{{uname}}</el-link>
                    <el-link style='margin-right: 50px' type="primary">余额：{{lastMoney}}</el-link>
                    <el-link style='margin-right: 10px' type="primary">{{msg}}</el-link>
                    <el-input-number v-model="money" :min="0" :max="maxMoney" :step='0.01' :controls="false" :precision="2"></el-input-number>
                    <el-link style='margin-left: 10px' type="primary">元</el-link>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editMoneyV = false">取 消</el-button>
                    <el-button type="primary" @click='editMoneyMethod'>提 交</el-button>
                </div>
            </el-dialog>
        </div>

        <div style='float: right;margin-bottom:80px'>
            <el-link type="primary">数据总条数:{{total}}</el-link>
        </div>

    </div>
</template>

<script>
export default {
    data(){
        return{
            searchType: '',
            searchKeyword:'',
            searchTypeTable:[
                {
                    label: '用户名',
                    value: 'username'
                },
                {
                    label: '手机号',
                    value: 'phone'
                }
            ],
            cities: ['商家','配送员','管理员'],
            userTable:[],
            roleUserId: null,
            border: true,
            roleArr: [],
            roleStr: '',
            editMoneyTitle: '',
            uname: '',
            lastMoney: null,
            msg: '',
            money: null,
            maxMoney: null,
            editMoneyUserId: null,
            editMoneyV: false,//充值 退款对话框
            editRoleV: false,
            addUserV: false,
            addUserForm:{
                username: '',
                password: '',
                nickname: '',
                role: ''
            },
            roleTable: [
                {
                    label: '普通用户',
                    value: 'user'
                },
                {
                    label: '商家用户',
                    value: 'seller'
                },
                {
                    label: '配送员',
                    value: 'runner'
                }

            ],
            searching: false, //是否正在分类检索
            dialogTitle: '',
            total: 100, //总数
            size: 10, //没页数据条数
        }
    },
    created() {
        this.getFirstUserData();

    },
    methods:{
        //转换身份数组
        getRolesArr(){
            for (let i = 0; i < this.userTable.length; i++) {
                let str = this.userTable[i].role;
                this.userTable[i].roles =  str.split('_');
            }
        },
        //获取第一页用户信息
        getFirstUserData(){
            const _this = this;
            this.$http.get('dev-api/admin/userList/1/10')
                .then(function(resp){
                    if (resp.data.code === 0){
                        _this.userTable = resp.data.data.content;
                        _this.getRolesArr();
                        _this.total = resp.data.data.total;
                        //console.log(_this.foodInfoTable)
                    }else{
                        _this.$message.error(resp.data.msg);
                    }
                })
        },

        //查询某一页user数据
        selectPage(currentPage){
            const _this = this;
            this.$http.get('dev-api/admin/userList/'+currentPage+'/10')
                .then(function(resp){
                    if (resp.data.code === 0){
                        _this.userTable = resp.data.data.content;
                        _this.getRolesArr();
                        _this.total = resp.data.data.total;
                        //console.log(_this.foodInfoTable)
                    }else{
                        _this.$message.error(resp.data.msg);
                    }
                })

        },

        //添加用户,打开对话框
        addUserButton(){
            this.dialogTitle = '添加用户';

            this.addUserV = true;
        },
        //添加用户
        addUserMethod(){
            const _this = this;
            this.$http.post('dev-api/admin/addUser',this.addUserForm)
            .then(function(resp){
                if (resp.data.code === 0){
                    _this.$message.success('添加用户成功')
                    _this.addUserV = false;
                    _this.getFirstUserData();
                }else{
                _this.$message.error(resp.data.msg);
                }
            })
        },
        //查找用户
        getUserMethod(){
            if (this.searchType === ''){
                this.$message.error('请先选择查找类型');
                return false;
            }
            if (this.searchKeyword === ''){
                this.$message.error('请先输入查找关键字');
                return false;
            }
            const _this = this;
            this.$http.get('dev-api/admin/getUser/'+this.searchType + '/' + this.searchKeyword)
            .then(function(resp){
                if (resp.data.code === 0){
                    _this.userTable = [];
                    _this.userTable[0] = resp.data.data;
                    _this.getRolesArr();
                    _this.$message.success('查找成功')
                }else{
                    _this.$message.error(resp.data.msg)
                }
            })
        },
        //退出搜索
        exitSearch(){
            this.searching = false;
            this.searchType = '';
            this.searchKeyword = '';
            this.getFirstUserData();
            this.$message.success("已退出")
        },
        //修改用户身份权限按钮
        editRoleButton(row){
            this.editRoleV = true;
            this.roleArr = [];
            this.roleUserId = null;
            let str = row.role;
            this.roleArr = str.split('_');
            this.roleUserId = row.userId;


        },
        //修改用户身份权限
        editRoleMethod(){
            //多选框绑定的是数组，这里把其中的元素用'_'拼接
            let str = this.roleArr.join('_');
            const _this = this;
            this.$http.put('dev-api/admin/editRole/'+this.roleUserId+'/'+str)
            .then(function(resp){
                if (resp.data.code === 0){
                    _this.$message.success('修改用户身份权限成功')
                    _this.getFirstUserData();
                    _this.editRoleV = false;
                }else {
                    _this.$message.error(resp.data.msg)
                }
            })
        },
        //充值
        addMoneyButton(row){
            this.editMoneyUserId = row.userId;
            this.maxMoney = 100000;
            this.money = null;
            this.editMoneyV = true;
            this.editMoneyTitle = '充值';
            this.uname = row.username;
            this.lastMoney = row.money;
            this.msg = '充值';

        },
        //退款
        subMoneyButton(row){
            this.editMoneyUserId = row.userId;
            this.maxMoney = row.money;
            this.money = null;
            this.editMoneyV = true;
            this.editMoneyTitle = '退款';
            this.uname = row.username;
            this.lastMoney = row.money;
            this.msg = '退款';
        },
        editMoneyMethod(){
            const _this = this;
            if (this.editMoneyTitle === '充值'){
                this.$http.put('dev-api/admin/addMoney/'+this.editMoneyUserId + '/' + this.money)
                .then(function(resp){
                    if (resp.data.code === 0){
                        _this.$message.success('给用户['+_this.uname+']充值'+_this.money+'元成功')
                        _this.editMoneyV = false
                        _this.getFirstUserData()
                    }else{
                        _this.$message.error(resp.data.msg)
                    }
                })
            }else{
                this.$http.put('dev-api/admin/subMoney/'+this.editMoneyUserId + '/' + this.money)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.$message.success('给用户['+_this.uname+']退款'+_this.money+'元成功')
                            _this.editMoneyV = false
                            _this.getFirstUserData()
                        }else{
                            _this.$message.error(resp.data.msg)
                        }
                    })
            }

        }

    }
}
</script>
